import Taro, {useDidShow} from '@tarojs/taro'
import {connect} from 'react-redux'
import { View, Text,Image } from '@tarojs/components'
import NavBar from '../../component/navbar/index';
import Styles from './index.module.less';
import { useEffect, useState } from 'react';
import {Request,getGlobalData} from '../../util';

function index(props){

    const navBarHeight = Taro.getStorageSync("navBarHeight");
    const [storePicture,setStorePicture] = useState("");
    const [regionList,setRegionList] = useState([]);
    const [storeList,setStoreList] = useState([]);
    const domain = getGlobalData("domain");

    useDidShow(()=>{
        props.sendTabBarID();
    })

    const getAllRegion = () => {
        let selectedRegion = Taro.getStorageSync("selectedRegion");
        Request(domain+"/client/region/allRegion").then((res)=>{
            var data = res.data.data;
            var newRegionArr = [];
            for(let i in data){
                newRegionArr[i] = data[i]
                if(selectedRegion){
                    if(selectedRegion == data[i].name){
                        newRegionArr[i].style = {color:"#fff",backgroundColor:"#D1A8A8"}
                    }else{
                        newRegionArr[i].style = {}
                    }

                }else{
                    
                    if(i == 0){
                        newRegionArr[i].style = {color:"#fff",backgroundColor:"#D1A8A8"}
                    }else{
                        newRegionArr[i].style = {}
                    }
                    
                }
            }
            setRegionList(newRegionArr);
        });
    }

    const getStorePicture = () => {
        Request(domain+"/client/image/getStore").then((res)=>{
            setStorePicture(res.data.data.url_1);
        });
    }


    const firstRegion = () => {
        
        return Request(domain + "/client/region/allRegion").then((res)=>{
            return res.data.data[0].name;
        })

    }

    const getStoreList = () => {

        const selectedRegion = Taro.getStorageSync("selectedRegion");

        if(selectedRegion){
            Request(domain+"/client/store/storeListForStorePage",{region: Taro.getStorageSync('selectedRegion')}).then((res)=>{
                setStoreList(res.data.data);
            });
        }else{
            Request(domain+"/client/region/allRegion").then((res)=>{
                return res.data.data[0].name;
            }).then( (res) => {
                Request(domain+"/client/store/storeListForStorePage",{region: res}).then((res)=>{
                    setStoreList(res.data.data);
                });
            })
        }
 
    }

    //获取门店图片
    useEffect(()=>{
        getStorePicture();
        getAllRegion();
        getStoreList();
    },[])


    /**
     * 处理区域按钮的逻辑
     * @param {*} region 
     */
    const handleRegionBtn = (region) => {
        //处理地区切换的逻辑
        Taro.setStorageSync('selectedRegion',region);
        let newRegionArr = [];
        for(let i in regionList){
            newRegionArr[i] = regionList[i];
            if(regionList[i].name == region){   
                newRegionArr[i].style = {color:"#fff",backgroundColor:"#D1A8A8"}
            }else{
                newRegionArr[i].style = {}
            }
        }
        setRegionList(newRegionArr);

        //获取门店列表
        getStoreList();
    }

    const handleSubmit = (store) => {
        Taro.setStorage({
            key:"selectedStore",
            data:store,
            complete:function(){
                Taro.switchTab({
                    url:"/pages/book/index"
                })
            }
        });
        
      
    }

    return (
        <view>
            <NavBar title="门店"/>
            
            <view class={Styles.top_wrap} style={{width:"100%",position:"fixed",top:navBarHeight}}>
                <view class={Styles.store_picture_wrap}>
                    <Image src={storePicture} class={Styles.store_picture}/>
                </view>
                <view class={Styles.cityList_wrap}>
                    {regionList.map((item)=>{
                        return (
                            <view class={Styles.city}  style={item.style} onClick={()=>{
                                handleRegionBtn(item.name);
                            }}>
                                {item.name}
                            </view>
                        )
                    })}
                </view>
            </view>
            
            <view class={Styles.storeList_wrap}>
                    {
                        storeList.map((item,key)=>{
                            return (
                                <view class={Styles.store_wrap} style={{backgroundColor: key % 2 == 1 ? "#FFF8F7" : ""}}>
                                    <view class={Styles.name}>{item.name}</view>
                                    <view class={Styles.info}>
                                        <view class={Styles.businessHours}>营业时间：{item.opening_time}~{item.closing_time}</view>
                                        <view class={Styles.phone}>营业电话：{item.phone}</view>
                                    </view>
                                    <view class={Styles.address}>地址：{item.address}</view>
                                    <view class={Styles.submit_wrap}>
                                        <view class={Styles.submitBtn} onClick={()=>{
                                            handleSubmit(item.name)
                                        }}>立即预约</view>
                                    </view>
                                </view>
                            )
                        })
                    }
            </view>
        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendTabBarID:()=>{
            dispatch({
                type:"STORE"
            })
        }
    }
}

export default connect(null, mapDispatchToProps)(index);